<template>
  <div class="index">
    <!-- index组件的router-view是对主页'/home'的子路由的展示，所以keep-alive只能缓存主页的子路由 -->
    <keep-alive include="City,home">
      <router-view></router-view>
    </keep-alive>
    <tab-bar :data="tabbarData" />
  </div>
</template>

<script>
import TabBar from "../components/TabBar";
export default {
  name: "index",
  components: {
    TabBar,
  },
  data() {
    return {
      tabbarData: [
        { title: "首页", icon: "home", path: "/home" },
        { title: "订单", icon: "file-text-o", path: "/order" },
        { title: "我的", icon: "user", path: "/me" },
      ],
    };
  },
};
</script>

<style scoped>
.index {
  width: 100%;
  height: calc(100% - 45px);
}
</style>